<template>
  <div>
    <div v-loading="loading" class="dashboard-container"></div>
    <el-card class="tree-card">
      <tree-tools :treeNode="company" :isRoot="true"/>
      <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
        <tree-tools 
        slot-scope="{ data }" 
        :treeNode="data" 
        @delDepts="getDepartmentsData" 
        @addDepts='addDepts'
        @editDepts='editDepts'/>
      </el-tree>
      <addDept 
      ref="addDept"
      :showDialog.sync='showDialog' 
      :tree-node="node" 
      @addDepts="getDepartmentsData" 
      />
    </el-card>
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue';
import addDept from './components/add-dept.vue';
import {getDepartments} from '@/api/departments';
import {tranListToTreeData} from '@/utils/index';
export default {
  components: { treeTools,addDept },
  name: "Departments",
  data() {
    return {
      departs: [],
      defaultProps: {
        label: "name", // 表示 从这个属性显示内容
      },
      company: {},
      showDialog: false,// 显示窗体
      node:{},
      loading: false // 用来控制进度弹层的显示和隐藏
    };
  },
  methods: {
    //获取数据
    async getDepartmentsData(){
      this.loading = true
      const res=await getDepartments();
      //console.log(res);
      const {companyName,depts}=res;
      this.company={name:companyName,manager:'负责人',id: '' };
      this.departs=tranListToTreeData(depts,'');
      this.loading = false
    },
    //添加部门
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
      //console.log(node)
    },
    editDepts(node) {
      // 首先打开弹层
      this.showDialog = true
      this.node = node // 赋值操作的节点
      //console.log(this.$refs)
      this.$refs.addDept.getDepartDetail(node.id) // 直接调用子组件中的方法 传入一个id
    }
  },
  created(){this.getDepartmentsData()},
  mounted() {

  },
  computed: {

  },
  watch: {

  },
};
</script>

<style lang='scss' scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>